<template>
  <div class="categoryList">
    <!-- 导航 -->
    <van-tabs class="nav" @click="navEvents" v-model="activeName">
      <van-tab class="item" v-for='items in navList' :key='items.id' :title="items.name" :name="items.name">
        <div class="title">
          <div class="name">{{items.name}}</div>
          <div class="desc">{{items.front_desc}}</div>
        </div>
        <!-- 列表 -->
        <div class="list" v-if="goodsList.length != 0">
          <router-link class="item" tag="div" :to="`/home/goods/detail?id=${item.id}`" v-for='item in goodsList' :key='item.id'>
            <img :src="item.list_pic_url" alt="">
            <div class="name">{{item.name}}</div>
            <div class="price">￥{{item.retail_price}}</div>
          </router-link>
        </div>
        <!-- 数据库暂无数据 -->
        <div class="none" v-else>数据库暂无数据... </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/category";
export default {
  name: "categoryList",
  data() {
    return {
      navList: [], // 导航列表
      goodsList: [], // 商品列表
      activeName: "", // 当前导航名字
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 获取导航数据
    categoryNav({
      id: this.$route.query.id,
    }).then((res) => {
      this.navList = res.data.navData;
    });
    // 获取分类商品列表
    goodsList({
      categoryId: this.$route.query.id,
    }).then((res) => {
      this.goodsList = res.data.data;
      this.activeName = res.data.currentNav.name;
    });
  },
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 导航
    navEvents(name, title) {
      var item = this.navList.find((ele) => ele.name == name);
      // 获取分类商品列表
      goodsList({
        categoryId: item.id,
      }).then((res) => {
        this.goodsList = res.data.data;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.categoryList {
  // 导航
  .nav {
    background-color: #f4f4f4;
    .item {
      // 标题
      .title {
        background-color: #fff;
        padding: 15px;
        margin: 10px 0 2.5px 0;
        .name {
          font-size: 14px;
          color: #333;
          margin: 15px 0 9px 0;
        }
        .desc {
          color: #999;
          font-size: 12px;
          margin: 12px auto;
        }
      }
      // 列表
      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          width: calc(50% - 1.25px);
          padding: 7.5px 0;
          margin-bottom: 2.5px;
          background-color: #fff;
          img {
            width: 151px;
            height: 151px;
            margin: 0 auto;
            vertical-align: top;
          }
          .name {
            padding: 0 10px;
            margin: 7.5px 0 11px 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .price {
            color: #b4282d;
            font-size: 15px;
            margin: 15px auto;
          }
        }
      }
      // 暂无数据
      .none {
        margin-top: 50px;
        color: #999;
      }
    }
  }
}
</style>